<template>
  <div class="deploy-progress">
    <el-timeline>
      <el-timeline-item
        v-for="(step, index) in steps"
        :key="step.step"
        :type="getTimelineItemType(step.status)"
        :icon="getTimelineIcon(step.status, index)"
        :color="getTimelineColor(step.status)"
        :size="step.status === DeployStatus.PROCESSING ? 'large' : 'normal'"
        :hollow="step.status === DeployStatus.PENDING"
      >
        <div class="step-content">
          <div class="step-header">
            <span class="step-title">{{ getStepTitle(step.step) }}</span>
            <status-tag type="deploy" :status="step.status" />
          </div>
          
          <div class="step-details">
            <p v-if="step.message" class="step-message" :class="{ 
              'error-text': step.status === DeployStatus.FAILED,
              'success-text': step.status === DeployStatus.SUCCESS
            }">{{ step.message }}</p>
            
            <div v-if="step.startTime || step.endTime" class="step-times">
              <p v-if="step.startTime" class="text-xs text-gray-500">
                开始: {{ formatTime(step.startTime) }}
              </p>
              <p v-if="step.endTime" class="text-xs text-gray-500">
                结束: {{ formatTime(step.endTime) }}
              </p>
              <p v-if="step.startTime && step.endTime" class="text-xs text-gray-500">
                耗时: {{ calculateDuration(step.startTime, step.endTime) }}
              </p>
            </div>
            
            <div v-if="step.status === DeployStatus.PROCESSING" class="step-processing">
              <el-progress 
                :percentage="50" 
                :indeterminate="true" 
                :duration="2"
                :stroke-width="4"
                status="warning"
                style="width: 200px"
              />
            </div>
          </div>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { DeployStep, DeployStatus, type DeployStepStatus } from '@/model/deploy-model'
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
import StatusTag from '@/components/StatusTag.vue'

dayjs.extend(duration)

defineOptions({
  name: 'DeployProgress'
})

const props = defineProps({
  steps: {
    type: Array as () => DeployStepStatus[],
    required: true
  }
})

// 获取步骤标题
const getStepTitle = (step: DeployStep) => {
  switch (step) {
    case DeployStep.UPLOAD:
      return '上传项目包'
    case DeployStep.EXTRACT:
      return '解压项目包'
    case DeployStep.COPY_CONFIG:
      return '拷贝配置文件'
    case DeployStep.NPM_INSTALL:
      return 'NPM 安装依赖'
    case DeployStep.NPM_BUILD:
      return 'NPM 构建项目'
    case DeployStep.RESTART:
      return '重启服务'
    case DeployStep.COMPLETE:
      return '完成部署'
    default:
      return step
  }
}

// 获取时间轴项的类型
const getTimelineItemType = (status: DeployStatus) => {
  switch (status) {
    case DeployStatus.SUCCESS:
      return 'success'
    case DeployStatus.PROCESSING:
      return 'warning'
    case DeployStatus.FAILED:
      return 'danger'
    default:
      return 'info'
  }
}

// 获取时间轴项的颜色
const getTimelineColor = (status: DeployStatus) => {
  switch (status) {
    case DeployStatus.SUCCESS:
      return '#67C23A'
    case DeployStatus.PROCESSING:
      return '#E6A23C'
    case DeployStatus.FAILED:
      return '#F56C6C'
    case DeployStatus.PENDING:
      return '#909399'
    default:
      return ''
  }
}

// 获取时间轴图标
const getTimelineIcon = (status: DeployStatus, index: number) => {
  switch (status) {
    case DeployStatus.SUCCESS:
      return 'Check'
    case DeployStatus.PROCESSING:
      return 'Loading'
    case DeployStatus.FAILED:
      return 'Close'
    default:
      return ''
  }
}

// 格式化时间
const formatTime = (time: string) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}

// 计算耗时
const calculateDuration = (start: string, end: string) => {
  const startTime = dayjs(start)
  const endTime = dayjs(end)
  const diff = endTime.diff(startTime)
  
  if (diff < 1000) {
    return '不到1秒'
  } else if (diff < 60000) {
    return `${Math.floor(diff / 1000)}秒`
  } else if (diff < 3600000) {
    const minutes = Math.floor(diff / 60000)
    const seconds = Math.floor((diff % 60000) / 1000)
    return `${minutes}分钟${seconds > 0 ? seconds + '秒' : ''}`
  } else {
    const duration = dayjs.duration(diff)
    return `${duration.hours()}小时${duration.minutes()}分钟`
  }
}
</script>

<style scoped lang="scss">
.deploy-progress {
  padding: 10px 0;
  
  .step-content {
    padding: 8px 0;
  }
  
  .step-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }
  
  .step-title {
    font-weight: 500;
    font-size: 16px;
  }
  
  .step-details {
    padding-left: 4px;
    
    .step-message {
      margin: 6px 0;
    }
    
    .step-times {
      margin-top: 6px;
      
      p {
        margin: 2px 0;
      }
    }
    
    .step-processing {
      margin-top: 10px;
    }
  }
}
</style>
